<template>
	
	<Suspense>
		<template #default>
			<A></A>
		</template>
		<template #fallback>
			加载中...
		</template>
	</Suspense>
	<B></B>

	<div ref='target'>
		<Suspense v-if='targetIsVisible'>
			<template #default>
				<C ></C>
			</template>
			<template #fallback>
				加载中...
			</template>
		</Suspense>
	</div>
		
	
</template>

<script setup>
import { useIntersectionObserver } from '@vueuse/core'

const A = defineAsyncComponent(() =>
  import('../components/A.vue')
)

import B from '../components/B.vue'

const C = defineAsyncComponent(() =>
  import('../components/C.vue')
)

const target = ref(null);
const targetIsVisible = ref(false);

const { stop } = useIntersectionObserver(
  target,
  ([{ isIntersecting }]) => {
  	if( isIntersecting ) {
  		targetIsVisible.value = isIntersecting
  	}
    
  },
)
</script>